import React from 'react';
import './scrollNumber.css';

class ScrollNumber extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            value: 0
        };

        this.storage = {
        };
    }

    static getDerivedStateFromProps (props, state) {
        return {
            value: props.value
        };
    }

    componentDidMount () {
    }

    renderSingleNumber (num) {
        return (
            <div className="singleNumber">
                <ul style={{ top: `-${num * 100}%` }}>
                    <li>0</li><li>1</li><li>2</li><li>3</li><li>4</li>
                    <li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
                </ul>
            </div>
        );
    }

    renderScrollNumber () {
        const valueStr = this.state.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

        return valueStr.split('').map((num, index) => {
            const isNumber = !isNaN(parseInt(num));

            if (isNumber) {
                return this.renderSingleNumber(num);
            }
            else {
                return <div className="separator">,</div>;
            }
        });
    }

    render () {
        return (
            <div className="scrollNumber">{this.renderScrollNumber()}</div>
        );
    }
}
export default ScrollNumber;
